<button class="btn btn-sm btn-outline-primary-dark" [routerLink]="['../../../../../../']">Back</button>

<h4>{{ name }}</h4>
<div *ngIf="type == targetType.Screening" class="my-4">
    <type4 *ngIf="screenableCriteria && screenableCriteria.length > 0 && screenableCriteria[0].criteriaType == 4" [templateCriteria]="screenableCriteria[0]" [edit]="edit" [param]="shortName"></type4>
    <!-- Screenable pipe checks if criteria has IsScreenable: true -->
    <div *ngFor="let item of screenableCriteria">        
        <type1 *ngIf="item.criteriaType == 1" [templateCriteria]="item" [edit]="edit"></type1>
        <type2 *ngIf="item.criteriaType == 2" [templateCriteria]="item"></type2>
        <type3 *ngIf="item.criteriaType == 3" [templateCriteria]="item" [level3]="criteriaLevel3Id" [edit]="edit"></type3>
        <type5 *ngIf="item.criteriaType == 5" [templateCriteria]="item" [answerCategories]="item.answerCategories"></type5>
        <type6 *ngIf="item.criteriaType == 6" [templateCriteria]="item" [edit]="edit"></type6>
        <type7 *ngIf="item.criteriaType == 7" [templateCriteria]="item" [level3]="criteriaLevel3Id" [edit]="edit"></type7>
        <type8 *ngIf="item.criteriaType == 8" [templateCriteria]="item"></type8>
        <type9 *ngIf="item.criteriaType == 9" [templateCriteria]="item"></type9>
        <type16 *ngIf="item.criteriaType == 16" [templateCriteria]="item" [edit]="edit"></type16>
        <type17 *ngIf="item.criteriaType == 17" [templateCriteria]="item" [answerCategories]="item.answerCategories"></type17>
        <type25 *ngIf="item.criteriaType == 25" [templateCriteria]="item" [answerCategories]="item.answerCategories"></type25>
    </div>
</div>

<div class="mt-2 mb-3">
    <h5 *ngIf="nonScreenableCriteria && nonScreenableCriteria.length > 0">Data Type</h5>
    <div *ngFor="let item of nonScreenableCriteria" class="mt-1">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" [ngModel]="checkStatus(item.id)" (change)="toggleCheck($event, item)" [attr.id]="'check'+item.id">
            <label class="form-check-label" [attr.for]="'check'+item.id">
                {{ item.name }}
            </label>
        </div>
    </div>
</div>

<button class="btn btn-sm btn-primary-dark" (click)="addCriteria()" [disabled]="selectDisabled">
    <span *ngIf="edit == 'true'">Update</span>
    <span *ngIf="edit == 'false'">Select</span>
    Criteria
</button>